<template>
	<view class="container">
		<view class="content">
			<view class="person-box">
				<view class="avatar-box-border">
					<image class="self-avatar" :src="person.header" mode="aspectFit"></image>
				</view>
				<view class="self-info">
					<h4>{{person.nickname}}</h4>
					<p>{{person.nickname}}</p>
				</view>
			</view>
			<view class="person-product">
				<p>{{person.sign}}</p>
				<view class="box-sex">
					<view class="box-sex-wrap">
						<icon v-if="person.gender === 1" type="text" class="iconfont icon-nv sex-style"></icon>
						<icon v-if="person.gender === 0" type="text" class="iconfont icon-nan sex-style"></icon>
					</view>
				</view>
			</view>
			<view class="person-active">
				<user-fan-and-like></user-fan-and-like>
			</view>
		</view>
		<view class="sign_button">
			<view class="button" :class="{active: isActive}" @click="goSign()">
				{{ isActive ? '签到' : '去签到' }}</view>
		</view>
		<tab :content='content' :topHeight="topHeight">
			<scroll-list :list="list" :isrefresh='isrefresh' :isreachBottom="isreachBottom"></scroll-list>
		</tab>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getLikeAndCollect
	} from '@/api/personal.js'
	import CommonConstant from '@/commons/constants/CommonConstant.js'
	import StringUtils from '@/commons/utils/StringUtils.js'
	import tab from "@/componts/common/PersonTab/tab.vue";
	import ScrollList from '@/componts/common/ScrollList/scroll-list.vue';
	import UserFanAndLike from '@/componts/user/UserFanAndLike/UserFanAndLike.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				content: '',
				// 距顶
				topHeight: 0,
				person: {},
				// 关注
				interest: 2,
				isActive: false,
				// 粉丝
				fans: 2,
				// 获赞
				collect: 3,
				isrefresh: 1,
				isreachBottom: 1,
				list: [{
						artPhoto: "https://img1.baidu.com/it/u=4204817206,15390844&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
						avatar: "https://img2.baidu.com/it/u=974038821,3597329702&fm=253&fmt=auto&app=138&f=JPEG?w=521&h=500",
						username: "德莱厄斯",
						likeCount: 9999,
						title: "昭，你从我的战斗中看到了什么？不要以为是我的儿子，或者流着我的血，就能得到天下的拥戴！每天以磨练自己，增长才识，识尽天下万物为要务！要统领天下，就要有比别人更高的目标！是这样吧，曹孟德啊。"
					},
					{
						artPhoto: "https://img2.baidu.com/it/u=3214362833,2846753221&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
						avatar: "https://img2.baidu.com/it/u=3717359169,699821506&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
						username: "疾风剑豪",
						likeCount: 1314,
						title: "人生太过于坚强，凡事都不柔软，凡事都不退让，凡事都不回避，凡事都不思考，大脑运转迟缓，俗称一根筋，那不是坚强，那是执着，那也是造成生活苦恼的来源。松松的看别人，能忘就忘了吧。"
					},
					{
						artPhoto: "https://img1.baidu.com/it/u=2956729074,324743534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
						avatar: "https://img2.baidu.com/it/u=3281844457,1839099443&fm=253&fmt=auto&app=138&f=JPEG?w=502&h=500",
						username: "影流之主",
						likeCount: 1314,
						title: "如果你的竞争对手正面对困境，那就去拉拢他的大客户。如果这些客户感觉到原来的产品质量下降了或是害怕服务会中断，他们可能会愿意转向你。！"
					},
					{
						artPhoto: "https://img0.baidu.com/it/u=1728071521,474726664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
						avatar: "https://img1.baidu.com/it/u=2852616194,3051069242&fm=253&fmt=auto&app=138&f=JPEG?w=508&h=500",
						username: "放逐之刃",
						likeCount: 1314,
						title: "年少轻狂，等于慢性自杀。"
					},
					{
						artPhoto: "https://img2.baidu.com/it/u=3916863077,2902504804&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
						avatar: "https://img2.baidu.com/it/u=1418259588,2896116588&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
						username: "无双剑姬",
						likeCount: 1314,
						title: "浓浓的情谊，传递着博友的真诚。相互的。问候，温暖着快乐的人生。博客的相识，不仅仅是缘分，更是一首交流的乐曲！愿幸福常在您身边，愉悦常在彼此心间！祝博友周末快乐！！"
					}
				]
			}
		},
		async onLoad() {
			this.isrefresh++
			await this.functionGetUserInfo()
			await this.functionGetUserLikeAndCollect()
		},
		components: {
			'tab': tab,
			'scroll-list': ScrollList,
			'user-fan-and-like': UserFanAndLike
		},
		mounted() {
			this.topHeight = this.getTopHeight();
		},
		onReachBottom() {
			this.isreachBottom++;
			for (let i = 0; i < 6; i++) {
				let index = this.$u.random(0, this.list.length - 1);
				let item = JSON.parse(JSON.stringify(this.list[index]));
				item.likeCount = Math.floor(Math.random() * 1000 + 1);
				this.list.push(item)
			}
		},
		methods: {
			/**
			 * 去签到界面
			 */
			goSign() {
				this.isActive = !this.isActive
				uni.navigateTo({
					url: '/pages/person-detail/PersonSign/PersonSign'
				})
			},
			/**
			 * 跳转去login
			 */
			routerToLogin() {
				uni.navigateTo({
					url: '/pages/tabbar/person/Login/Login'
				})
			},
			/**
			 * 获取用户点赞和收藏
			 */
			async functionGetUserLikeAndCollect() {
				let response = await getLikeAndCollect()
				this.collect = response.data
			},

			/**
			 * 获取用户信息
			 */
			async functionGetUserInfo() {
				uni.getStorage({
					key: CommonConstant.USER_INFO,
					success: (res) => {
						this.parsePerson(res)
					},
					fail: () => {
						this.routerToLogin()
					}
				})
			},
			/**
			 * 转化成person
			 */
			parsePerson(res) {
				if (res.data) {
					this.person = res.data
				}
			},
			/**
			 * 获取顶部高度
			 */
			getTopHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.content')
					.boundingClientRect()
					.exec(res => {
						return res[0].height
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$paddoingTop: 30rpx;
	@import url('/static/asset/icons/sex_icon.scss');
	@import url('/static/asset/settings/settings.scss');

	.container {
		background-image: radial-gradient(circle at 20% 20%, rgb(20, 50, 70), rgb(60, 80, 60));

		.content {

			color: white;

			.person-box {
				padding-top: $paddoingTop;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.avatar-box-border {
					margin-left: 30rpx;
					width: 160rpx;
					height: 160rpx;
					display: flex;
					// 阴影和边框被我干掉了
					border: 1px solid red;
					border-radius: 50%;

					.self-avatar {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						margin: auto;
					}
				}

				.self-info {
					margin-left: 45rpx;
					display: flex;
					flex-direction: column;

					h4 {
						font-size: 18px;
					}

					p {
						font-size: 12px;
						color: darkgrey;
						padding-top: 20rpx;
					}
				}
			}

			.person-product {
				p {
					font-size: 15px;
					padding: 30rpx 0 20rpx 30rpx;
					font-family: Verdana, Geneva, Tahoma, sans-serif;
				}

				.box-sex {
					padding-left: 30rpx;

					.box-sex-wrap {
						width: 80rpx;
						padding: 0rpx 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba(176, 196, 222, .5);
						border-radius: 30rpx;

						.sex-style {
							font-size: 20px;
						}

					}
				}
			}

			.person-active {
				display: flex;
				justify-content: space-around;
				width: 100%;
				padding: 45rpx 0rpx;

				.person-active-left {
					display: flex;
					justify-content: space-around;
					width: 50%;

					.person-fans {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						p {
							font-size: 13px;
						}

						h4 {
							padding-top: 15rpx;
							font-size: 12px;
							font-weight: 500;
						}
					}
				}

				.person-active-right {
					display: flex;
					width: 50%;
					justify-content: space-around;
					align-items: center;

					.person-button {
						background-color: rgba(85, 90, 80, .7);
						height: 60rpx;
						line-height: 60rpx;
						color: white;
						margin-right: 30rpx;
						border: 1px solid white;
						border-radius: 30rpx;
					}

					.icon-config {
						background-color: rgba(85, 90, 80, .7);
						font-size: 22px;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0rpx 20rpx;
						border: 1px solid white;
						margin-right: 30rpx;
						border-radius: 30rpx;
					}
				}
			}
		}

		.sign_button {
			width: 100%;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90vw;
				margin-left: 5vw;
				height: 50px;
				border: 1px solid orangered;
				font-size: 24px;
				color: orangered;
				transition: all 0.3s ease-in-out;
				border-radius: 30rpx;
				margin-bottom: 10px;
			}

			.active {
				background-color: #290256;
				color: #fff;
				border-color: #2d8cf0;
			}
		}


	}
</style>